import React, { useState,useCallback } from 'react';
import { Ulcon,Nomore } from './readStyled'
import Floorbn from '@c/floorbn/Floorbn'

const ReadList = (props) => {
    let [state, setState] = useState({ list:[]})

    // console.log(props.list);

    const addBook =useCallback( (hbId)=>{
         return ()=>{
            state.list.push(hbId)
            setState({
                list:state.list,
            })
         }
    },[state])

    const deleteBook =useCallback( (hbId)=>{
        return ()=>{
            let index = state.list.indexOf(hbId)
            state.list.splice(index, 1)
            setState({
                list: state.list
            })
        }
    },[state])

    return (
        <>
            <Ulcon bool={ state.lenght }>
                {
                    props.list && props.list.map((v, i) => {
                        return (
                            <li key={v.hbId}>
                                <div>
                                    <img src={'http://9z4nm9.natappfree.cc' + v.hbFengMian} alt="" />
                                </div>
                                <p>{v.hbName}</p>
                                <p>{v.hbType}</p>
                                <h3>
                                    <span onClick={addBook(v.hbId)}  style={{ display: state.list.some( item => item === v.hbId) ? 'none' : 'block' }}>选入</span> 
                                    <em onClick={deleteBook(v.hbId)} style={{ display: state.list.some( item => item === v.hbId) ? 'block' : 'none' }}>移除</em>
                                </h3>
                                { !!v.hbStatus && <strong>布置过</strong>}
                            </li>
                        )
                    })
                }
            <Nomore> 没有更多了...</Nomore>
            </Ulcon>
            {
                state.list.length > 0 && <Floorbn show='block' title='去布置' to='/publish' fbnum={ state.list.length }></Floorbn>
            }
        </>

    );
}

export default ReadList;